<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收货地址</title>
    <link rel="stylesheet" href="style/common.css"/>
    <link rel="stylesheet" href="style/center.css"/>
</head>
<body>

<!--start-->
<div class="techbook userCenter userAddress">
    <!--head-->
    <div class="head head_about">
        <div class="top">
            <div class="wrap">
                <div class="fl">51TechBook.com，为技术而生！</div>
                <div class="fr">
                    <p class="fl">Hi，<a href="" class="username">张三</a><a href="" class="logout">[退出]</a></p>

                    <div class="fr topMenu">
                        <dl>
                            <dt>
                                <a href="">我的订单</a>
                            </dt>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">个人中心</a>
                            </dt>
                            <dd>
                                <a href="">个人信息</a><a href="">安全中心</a><a href="">收货地址</a><a href="">等待添加</a>
                            </dd>
                        </dl>
                        <dl class="cart">
                            <dt><a href="">购物车<i>16</i></a></dt>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">我是商家</a>
                            </dt>
                            <dd>
                                <a href="">我是商家</a>
                                <a href="">我是商家</a>
                                <a href="">我是商家</a>
                            </dd>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">客户服务</a>
                            </dt>
                            <dd>
                                <a href="">消费服务</a>
                                <a href="">商家服务</a>
                            </dd>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">更多</a>
                            </dt>
                            <dd>
                                <a href="">更多</a>
                                <a href="">更多</a>
                                <a href="">更多</a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>


        <div class="bot">
            <div class="wrap">
                <div class="left fl">
                    <a href="" class="logo"><img src="img/front/about_logo.jpg" alt=""></a>
                </div>
                <div class="right fr">
                    <ul class="commitmentList"></ul>

                </div>
            </div>
        </div>

        <div class="nav">
            <div class="wrap">
                <div class="all_category_inner fl" id="all_category_inner"><div>全部图书分类</div></div>
                <div class="list fl">
                    <a href="">首页</a><a href="">预售</a><a href="">荐书</a>
                </div>
                <div class="fr free"><a href="">我要免费开店</a></div>
            </div>
        </div>

        <div class="menu wrap">
            <div class="list dn" id="menuList4inner">
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
            </div>
        </div>

    </div>
    <!--head End-->

    <!--body-->
    <div class="body">
        <div class="wrap">
            <div class="side fl">

                <h2 class="sideTitle bgWhite">中心首页</h2>

                <div class="userMenu bgWhite">
                    <dl>
                        <dt>我的交易</dt>
                        <dd><a href="">我的购物车</a></dd>
                        <dd><a href="">我的订单</a></dd>
                        <dd><a href="">评价晒单</a></dd>
                    </dl>
                    <dl>
                        <dt>我的收藏</dt>
                        <dd><a href="">商品收藏</a></dd>
                        <dd><a href="">浏览历史</a></dd>
                    </dl>

                    <dl>
                        <dt>客服服务</dt>
                        <dd><a href="">退款管理</a></dd>
                        <dd><a href="">举报管理</a></dd>
                    </dl>
                    <dl>
                        <dt>帐户设置</dt>
                        <dd><a href="">个人信息</a></dd>
                        <dd><a href="">安全中心</a></dd>
                        <dd><a href="">收货地址</a></dd>
                    </dl>
                </div>

            </div>

            <div class="det bgWhite fr">
                <dl class="userCenterLayout userCenterLayout02">
                    <dt><i class="fl"></i><b>收货地址</b></dt>
                    <dd>

                        <div class="userAddressForm">
                            <h3 class="tit">新增/修改收货地址</h3>

                            <dl>
                                <dt><em>*</em>收货人姓名：</dt>
                                <dd><input type="text" value="长度不超过25个字符" class="ipt"/></dd>
                            </dl>
                            <dl>
                                <dt><em>*</em>所在地址：</dt>
                                <dd>
                                    <select>
                                        <option value="">省/直辖市</option>
                                    </select>
                                    <select>
                                        <option value="">市</option>
                                    </select>
                                    <select>
                                        <option value="">区县</option>
                                    </select>
                                    <select>
                                        <option value="">乡镇/街道</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl>
                                <dt><em>*</em>详细地址：</dt>
                                <dd>
                                    <textarea>建议您如实填写详细收货地址</textarea>
                                </dd>
                            </dl>
                            <dl>
                                <dt>邮政编码：</dt>
                                <dd><input type="text" class="ipt"/></dd>
                            </dl>
                            <dl>
                                <dt><em>*</em>手机：</dt>
                                <dd><input type="text" class="ipt" value="手机号"/> <span class="error"></span></dd>
                            </dl>
                            <dl>
                                <dt>备用电话：</dt>
                                <dd><input type="text" class="ipt" value="手机号/区号-固定电话"/></dd>
                            </dl>
                            <dl class="set">
                                <dt>&emsp;</dt>
                                <dd><label><input type="checkbox" class="chk"/><span>设置为默认地址</span></label></dd>
                            </dl>
                            <dl class="btn">
                                <dt>&emsp;</dt>
                                <dd><button type="submit">保存</button></dd>
                            </dl>

                        </div>


                        <dl class="userAddressList" id="userAddressList">
                            <dt>已经保存了6条地址，还能保存14个地址</dt>
                            <dd>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <th width="70">收货人</th>
                                        <th width="120">所在地址</th>
                                        <th width="10"></th>
                                        <th width="120">详细地址</th>
                                        <th width="10"></th>
                                        <th width="80">邮编</th>
                                        <th width="110">手机/电话</th>
                                        <th colspan="2">操作</th>
                                    </tr>
                                    <tr class="yet">
                                        <td>王小二</td>
                                        <td>湖北省 襄阳市 襄阳区 襄阳路</td>
                                        <td></td>
                                        <td>湖北省 襄阳市 襄阳区 襄阳路</td>
                                        <td></td>
                                        <td>000000</td>
                                        <td>15912345678</td>
                                        <td><a href="">修改</a> | <a href="" class="del">删除</a></td>
                                        <td><div class="def">默认地址</div><div class="set">设为默认</div></td>
                                    </tr>

                                    <tr>
                                        <td>王小二</td>
                                        <td>湖北省 襄阳市 襄阳区 襄阳路</td>
                                        <td></td>
                                        <td>湖北省 襄阳市 襄阳区 襄阳路</td>
                                        <td></td>
                                        <td>000000</td>
                                        <td>15912345678</td>
                                        <td><a href="">修改</a> | <a href="" class="del">删除</a></td>
                                        <td><div class="def">默认地址</div><div class="set">设为默认</div></td>
                                    </tr>

                                    <tr>
                                        <td>王小二</td>
                                        <td>湖北省 襄阳市 襄阳区 襄阳路</td>
                                        <td></td>
                                        <td>湖北省 襄阳市 襄阳区 襄阳路</td>
                                        <td></td>
                                        <td>000000</td>
                                        <td>15912345678</td>
                                        <td><a href="">修改</a> | <a href="" class="del">删除</a></td>
                                        <td><div class="def">默认地址</div><div class="set">设为默认</div></td>
                                    </tr>

                                    <tr>
                                        <td>王小二</td>
                                        <td>湖北省 襄阳市 襄阳区 襄阳路</td>
                                        <td></td>
                                        <td>湖北省 襄阳市 襄阳区 襄阳路</td>
                                        <td></td>
                                        <td>000000</td>
                                        <td>15912345678</td>
                                        <td><a href="">修改</a> | <a href="" class="del">删除</a></td>
                                        <td><div class="def">默认地址</div><div class="set">设为默认</div></td>
                                    </tr>

                                    <tr>
                                        <td>王小二</td>
                                        <td>湖北省 襄阳市 襄阳区 襄阳路</td>
                                        <td></td>
                                        <td>湖北省 襄阳市 襄阳区 襄阳路</td>
                                        <td></td>
                                        <td>000000</td>
                                        <td>15912345678</td>
                                        <td><a href="">修改</a> | <a href="" class="del">删除</a></td>
                                        <td><div class="def">默认地址</div><div class="set">设为默认</div></td>
                                    </tr>

                                </table>
                            </dd>
                        </dl>
                    </dd>
                </dl>
            </div>

            <div class="cb"></div>

        </div>
    </div>
    <!--body End-->

    <!--foot-->
    <div class="foot">
        <div class="copyright">
            <p class="wrap">Copyright&nbsp;&copy;&nbsp;2013-2018&nbsp;武汉创远达信息技术有限公司版权所有&emsp;鄂ICP备14008188-1号</p>
        </div>
    </div>
    <!--foot End-->

</div>
<!--End-->

</body>
<script src="script/jquery.js"></script>
<script src="script/plug.js"></script>
<script src="script/common.js"></script>
<script>
$(function(){
    var $list=$('#userAddressList')
    //地址高亮+显示设为默认
    $list.on({
        mouseenter: function () {
            $(this).addClass('hl');
            if($(this).hasClass('yet'))return;
            $(this).find('.set').show();
        },
        mouseleave: function () {
            $(this).removeClass('hl');
            $(this).find('.set').hide();
        }
    },'tr');

    //删除
    $list.on('click','.del', function () {
        $(this).closest('tr').slideUp();
        return false;
    });

    //设为默认
    $list.on('click','.set', function () {
        $list.find('.yet').removeClass('yet').find('.def').hide();
        $(this).hide().closest('td').find('.def').show().closest('tr').addClass('yet');
    });
});
</script>
</html>